<template>
    <div class="cmt-container">
       <h3>发表评论</h3>
       <hr>
       <textarea placeholder="输入评论内容，（最多120字）" maxlength="120" v-model="msg"></textarea>
       <mt-button type="primary" size="large" @click="postComment">发表内容</mt-button>
       <div class="cmt-list">
            <div class="cmt-item" v-for="(item,i) in comment" :key="item.id">
                <div class="cmt-title">
                    第{{i+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time|dateFormat}}
                </div>
                <div class="cmt-body">
                    {{item.content}}
                </div>
            </div>
       </div>
       <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
    data(){
        return{
            pageIndex:1,
            comment:[
                {user_name:"aa",add_time:new Date(),content:"内容内容！",id:7},
                {user_name:"aa",add_time:new Date(),content:"内容内容！",id:6},
                {user_name:"aa",add_time:new Date(),content:"内容内容！",id:5},
                {user_name:"aa",add_time:new Date(),content:"内容内容！",id:4},
                {user_name:"aa",add_time:new Date(),content:"内容内容！",id:3},
                {user_name:"aa",add_time:new Date(),content:"内容内容！",id:2},
                {user_name:"aa",add_time:new Date(),content:"内容内容！",id:1}
            ],
            msg:'',
            idnum:0
        }
    },
    created(){
        // getComment()    
        this.clg()
    },
    methods:{
        clg(){
            console.log(this.id);
        },
        //获取评论
        // getComment(){
        //     this.$http.get("api/getcommeng/"+this.id+"?pageindex="+this.pageIndex).then(result=>{
        //         if(result.body.status===0){
        //             this.newsinfo= this.newsinfo.concat(result.body.message)
        //         }else{
        //             Toast("评论获取失败！")
        //         }
        //     })
        // },
        // 获取更多评论
        // getMore(){
        //     this.pageIndex++;
        //     this.getComment();
        // },
         getMore(){
            this.comment.push(
                 {user_name:"aa",add_time:new Date(),content:"内容内容！",id:this.comment.length+1},
                {user_name:"aa",add_time:new Date(),content:"内容内容！",id:this.comment.length+2},
                {user_name:"aa",add_time:new Date(),content:"内容内容！",id:this.comment.length+3},
                {user_name:"aa",add_time:new Date(),content:"内容内容！",id:this.comment.length+4},
                {user_name:"aa",add_time:new Date(),content:"内容内容！",id:this.comment.length+5},
            )
        },
        //发表评论
        postComment(){
            this.idnum=this.comment.length+1
            if(this.msg.trim().length===0){
                return Toast("评论内容不能为空！");
            }

            var cmt={
                user_name:"无名氏",
                add_time:Date.now(),
                content:this.msg.trim(),
                id:this.idnum
                    }
            this.comment.unshift(cmt);
            this.msg="";

            // this.$http.post("api/postcomment/"+this.$route.params.id,{
            //     content:this.msg.trim()
            // }).then(result=>{
            //     if(result.body.status===0){
            //         var cmt={
            //             user_name:"无名氏",
            //             add_time:Date.now(),
            //             content:this.msg.trim()
            //         }
            //         this.comments.unshift(cmt);
            //         this.msg="";
            //     }
            // })
        }
    },
    props:["id"]
}

</script>

<style lang="scss" scoped>
.cmt-container{
    h3{
        font-size:18px;
    }
    textarea{
        font-size:14px;
        height:85px;
        margin:0;
    }
    .cmt-list{
        .cmt-item{
                font-size:13px;

            .cmt-title{
                line-height:30px;
                background-color:#ccc;
            }
              .cmt-body{
                  line-height:35px;
                  text-indent:2em;
             }

        }
      
    }
}
</style>